import React, {Component} from 'react';

import ListTitle from './ListTitle';
import ListItem from './ListItem';

class List extends Component {
  static defaultProps = {
    title: '',
    onChange: () => {}
  }
  constructor (props) {
    super(props);
    this.state = {
      list: props.list.map(item => ({
        text: item.text,
        checked: item.checked
      }))
    };
  }
  fnChange (item) {
    // console.log(item);
    const {list} = this.state;
    this.setState({
      list: list.map(entry => ({
        text: entry.text,
        checked: entry.text === item.text ? !item.checked : entry.checked
      }))
    });
    this.props.fnItemChange(item);
  }
  render () {
    const {title} = this.props;
    let {list} = this.state;
    return (
      <div>
        <ListTitle title={title}></ListTitle>
        <ul>
          {
            list.map((item, index) => (
              <ListItem key={`item-${index}`} checked={item.checked} fnChange={this.fnChange.bind(this, item)} text={item.text}></ListItem>
            ))
          }
        </ul>
      </div>
    )
  }
}

export default List;
